<template>

    <div class="login-wraper">
        <img class="login-logo" src="@/assets/login-logo.png">


        <div class="login-content">
            <div class="login-left"><img src="@/assets/color-bg.png" alt="" width="400"></div>
            <div class="login-right">
                <div class="login-right__tab">
                    <div class="login-right__tab--title login-right__tab--active">登录CRM</div>
                    <!-- <div class="login-right__tab--title login-right__tab--last">登录服务云 </div> -->
                </div>

                <!-- <div> -->
                <el-form :rules="rules" ref="logonForm" :model="logonForm" class="input-block">
                    <el-form-item prop="userName">
                        <el-input v-model="logonForm.userName" placeholder="请输入手机号码"></el-input>
                    </el-form-item>
                    <el-form-item prop="pwd">
                        <el-input v-model="logonForm.pwd" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item prop="phoneCode">
                        <el-input v-model="logonForm.phoneCode" placeholder="请输入验证码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button class="input-block__submit " :disabled="isdisabled" type="primary"
                            @click="onSubmit">登录</el-button>
                    </el-form-item>
                </el-form>
                <!-- </div> -->
            </div>
        </div>





    </div>
</template>

<script>
export default {
    data() {
        return {
            logonForm: {
                userName: '',
                pwd: '',
                phoneCode:'',
            },
            isdisabled: true,
            rules: {
                userName: [
                    { required: true, message: '请输入登录账号', trigger: 'blur' },
                ],
                pwd: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                ],
                phoneCode: [
                    { required: true, message: '验证码不能为空', trigger: 'blur' },
                ]
            }


        }
    },
    watch: {
        'logonForm.userName': 'validateForm',
        'logonForm.pwd': 'validateForm',
        'logonForm.phoneCode': 'validateForm'
    },
    methods: {
        onSubmit() {
            let that = this;
            this.$refs["logonForm"].validate((valid) => {
                if (valid) {//验证通过
                    //模拟登录
                    this.$axios.get("/static/json/user.json").then(temp => {
                        var count = temp.data.filter(user => {
                            return user.account == that.logonForm.userName && user.pwd == that.logonForm.pwd
                        }).length;
                        debugger
                        if (count > 0) {
                            this.$router.push("/crm");
                        }else{
                            this.$message.error('账号或密码错误！');
                        }
                    });

                } else {

                }
            });


        },
        validateForm() {
            this.$refs["logonForm"].validate((valid) => {
                console.log(valid);
                this.isdisabled = !valid;
            });
        }

    }
}
</script>

<style scope>
.login-wraper {
    align-items: center;
    display: flex;
    height: 100vh;
    justify-content: center;
    min-width: 800px;
    position: relative
}

.login-logo {
    left: 36px;
    position: absolute;
    top: 36px;
    width: 136px
}

.login-content {
    border-radius: 8px;
    box-shadow: 0 1px 12px 0 rgba(0, 0, 0, .1);
    display: flex;
    height: 500px;
    overflow: hidden;
    width: 800px
}

.login-left .login-right {
    height: 100%;
    overflow: hidden;
    width: 400px
}


.login-left {
    align-items: center;
    background-color: #f2f3f5;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center
}

.login-right {
    box-sizing: border-box;
    padding: 40px 40px 0;
    width: 45vh;
}

.login-right__free,
.login-right__tab {
    font-size: 20px;
    margin-bottom: 32px
}

.login-right__tab {
    align-items: center;
    color: #969799;
    cursor: pointer;
    display: flex;
    font-style: normal
}

.input-block {
    margin: 0 0 20px
}


.login-right__tab--title:after {
    color: #c9cdd4;
    /* content: "|"; */
    margin: 0 20px
}

.login-right__tab--last:after {
    display: none
}

.login-right__tab--active {
    color: #323233
}

.login-right .el-input__inner {
    height: 40px;
    line-height: 40px
}

.input-block__submit {
    font-size: 18px;
    height: 40px;
    letter-spacing: 6px;
    margin-top: 30px;
    width: 100%;
    background-color: #ff8c2e;
    border: 0;
}

.el-button--primary.is-disabled {
    background-color: #ffc78b !important;
    border-color: #ffc78b !important;
    color: #fff !important
}
</style>